<template>
    <div class="page_root" :key="queryUpdateFlag" data-page-name="交付变更记录" data-page-identification="d_67q5fevwh3">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_swkjc1hk9u 自定义模板_jwcg5tydz5 -->
            <a-modal
                v-model:visible="state.showFileVisible"
                title="查看附件"
                width="800px"
                destroy-on-close
                @cancel="cancelFile"
                :mask-closable="false"
                :keyboard="false"
                centered
                :footer="null"
            >
                <div v-for="(item, index) in state.fileList">
                    <a :href="item.url">{{ item.name }}</a>
                </div>
            </a-modal>
            <!--          新建/编辑变更记录-->
            <a-modal
                v-model:visible="state.modalVisible"
                :title="state.modalTitle"
                width="800px"
                @ok="handleSubmitRecord"
                @cancel="cancelRecord"
                :ok-button-props="{ loading: state.modalLoading }"
                destroy-on-close
                :mask-closable="false"
                :keyboard="false"
                centered
            >
                <div class="close-form">
                    <a-form :model="state.modalForm" ref="recordRef">
                        <a-row>
                            <a-col :span="24">
                                <a-form-item
                                    label="投入工时评估"
                                    :rules="[{ required: true, message: '请输入投入工时评估', trigger: 'blur' }]"
                                    name="workHourEval"
                                >
                                    <a-input-number
                                        style="width: 100%"
                                        v-model:value="state.modalForm.workHourEval"
                                        :placeholder="inputHolder"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item
                                    label="需求变更描述"
                                    :rules="[{ required: true, message: '请输入需求变更描述', trigger: 'blur' }]"
                                    name="demandChangeDesc"
                                >
                                    <a-textarea
                                        style="width: 100%"
                                        v-model:value="state.modalForm.demandChangeDesc"
                                        :placeholder="inputHolder"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item
                                    label="外部影响评估"
                                    :rules="[{ required: true, message: '请输入外部影响评估', trigger: 'blur' }]"
                                    name="extInfluenceAssessment"
                                >
                                    <a-textarea
                                        style="width: 100%"
                                        v-model:value="state.modalForm.extInfluenceAssessment"
                                        :placeholder="inputHolder"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item
                                    label="事项关联依赖"
                                    :rules="[{ required: true, message: '请输入事项关联依赖', trigger: 'blur' }]"
                                    name="itemRelationDependency"
                                >
                                    <a-textarea
                                        style="width: 100%"
                                        v-model:value="state.modalForm.itemRelationDependency"
                                        :placeholder="inputHolder"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item
                                    label="其他影响说明"
                                    name="otherImpactDesc"
                                    :rules="[{ required: true, message: '请输入其他影响说明', trigger: 'blur' }]"
                                >
                                    <a-textarea
                                        style="width: 100%"
                                        v-model:value="state.modalForm.otherImpactDesc"
                                        :placeholder="inputHolder"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="">
                                    <a-upload
                                        :file-list="state.modalForm.attachmentList"
                                        :multiple="true"
                                        :before-upload="handlerUpload"
                                        @remove="handleRemove"
                                        accept=".xlsx,.ppt,.pdf,.PDF, image/*, .docx, .rp, .xls"
                                    >
                                        <a-button type="primary">
                                            <upload-outlined />
                                            上传
                                        </a-button>
                                    </a-upload>
                                    <span>支持格式：image/*,.xlsx,.xls,.docx,.rp,.ppt,.pptx,.pdf</span>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </a-modal>
            <!--          新建/编辑变更记录-->
            <div class="record-body">
                <a-tabs v-model:activeKey="state.activeKey" @change="tabChange">
                    <a-tab-pane key="外部需求变更记录" tab="外部需求变更记录" />
                    <a-tab-pane key="项目管理变更记录" tab="项目管理变更记录" />
                </a-tabs>
                <template v-if="state.activeKey === '项目管理变更记录'">
                    <div class="top-search">
                        <!-- 第一行筛选条件 -->
                        <a-row :gutter="16">
                            <a-col :span="6">
                                <a-form-item label="变更模块" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
                                    <a-select
                                        v-model:value="state.filter.classify"
                                        placeholder="请选择"
                                        :options="state.classifyList"
                                        allowClear
                                        show-search
                                        :filter-option="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="提交人" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
                                    <a-select
                                        :placeholder="selectHolder"
                                        v-model:value="state.filter.submitter"
                                        showSearch
                                        :options="peopleList"
                                        :field-names="{ label: 'label', value: 'value' }"
                                        :filter-option="
                                            (input, option) => {
                                                return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                            }
                                        "
                                        @focus="getAllJfPeople"
                                    />
                                </a-form-item>
                            </a-col>

                            <a-col :span="6">
                                <a-form-item label="提交日期" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
                                    <a-range-picker
                                        value-format="YYYY-MM-DD"
                                        v-model:value="state.filter.submissionTimeList"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-space>
                                    <a-button type="primary" @click="getData">查询</a-button>
                                    <a-button @click="resetData" type="primary" ghost>重置</a-button>
                                </a-space>
                            </a-col>
                        </a-row>

                        <!-- 操作按钮 -->
                    </div>
                    <div class="table-box">
                        <a-table
                            :columns="columns"
                            :data-source="state.dataSource"
                            bordered
                            :loading="state.tableLoading"
                            :scroll="{ y: state.tableHeight }"
                            @resizeColumn="handleResizeColumn"
                        />
                    </div>
                </template>
                <template v-else>
                    <div class="title-top">
                        <div>外部需求变更记录</div>
                        <a-button type="primary" @click="handleShowAdd">新建</a-button>
                    </div>
                    <div class="table-box">
                        <a-table
                            :columns="columns1"
                            :data-source="state.dataSource1"
                            bordered
                            :loading="state.tableLoading"
                            :scroll="{ y: state.tableHeight }"
                            @resizeColumn="handleResizeColumn"
                        >
                            <template #bodyCell="{ record, text, column, index }">
                                <template v-if="column.dataIndex === 'workHourEval'"> {{ text }}天 </template>
                                <template v-if="column.dataIndex === 'operation'">
                                    <a-space :size="0">
                                        <a-button type="link" size="small" @click="hanldeShowEdit(record)"
                                            >编辑</a-button
                                        >
                                        <a-popconfirm title="确定删除吗?" @confirm="handleDeleteRecord(record)">
                                            <a-button type="link" size="small">删除</a-button>
                                        </a-popconfirm>
                                        <a-button type="link" size="small" @click="handleShowFile(record)"
                                            >查看附件</a-button
                                        >
                                    </a-space>
                                </template>
                            </template>
                        </a-table>
                    </div>
                </template>
            </div>
            <!-- end vid_swkjc1hk9u 自定义模板_jwcg5tydz5 -->
        </a-spin>
    </div>
</template>
<script setup lang="tsx">
    import {
        h,
        ref,
        reactive,
        toRaw,
        markRaw,
        watch,
        computed,
        onBeforeMount,
        onMounted,
        onBeforeUnmount,
        onUnmounted,
        onActivated,
        onDeactivated
    } from 'vue'
    import { useRoute, useRouter } from 'vue-router'
    const router = useRouter()
    const route = useRoute()
    import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
    import {
        cloneDeep,
        localGet,
        merge,
        getDifferenceArray,
        traversalTreeStructure,
        checkCaseCondition,
        renderStringInTemplate,
        handleBreadcrumbJump,
        throttle,
        permission,
        getComponentParamsValue
    } from '@/utils/index'
    import { isNullOrEmpty, isEmptyArr, isNullOrUnDef, isContained, isArray, isEmpty, isObject } from '@/utils/is'
    import dayjs from 'dayjs'
    import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
    import { message, notification, Modal } from 'ant-design-vue'
    import {
        propertyFormatByNumber,
        propertyFormatByPercentage,
        propertyFormatByDate,
        parseSubFromDataList
    } from '@/utils/format'
    import colorTheme from '@/design/custom-theme.json'
    import { modalProps } from 'ant-design-vue/es/modal/Modal'
    import A from '@/views/page/iframtest/a.vue'
    /*** PUBLISH_EXEGESIS ***
 import UserTableRecords from '@/model/UserTableRecords';
 import { getAppBaseUrl } from '@/utils/index';
 import { sendToken } from "@/hooks/useIframeToken";
 import { useSystemStore } from "@/store/modules/system";
 const systemStore = useSystemStore();
 *** PUBLISH_EXEGESIS ***/

    // 获取传入的流程ID和组件参数
    const props = defineProps({
        'processInstanceId': {
            type: [String, Number, Boolean],
            default: undefined
        },
        'useProjectId': {
            type: [String, Number, Symbol],
            default: undefined
        },
        activeKey: String,
        refreshCount: Number
    })
    const immediateWatch = (source, callback) => {
        watch(source, callback, { deep: true, immediate: true })
    }

    /* -------------------------- 属性定义 -------------------------- */

    const setTimeOutList = []
    const pageLoading = reactive({
        loading: false,
        tip: undefined
    })
    const authInfo = localGet('app-user-store')

    // 处理校验
    const setSubFormName = (parentInfo, name) => {
        return [parentInfo.parents, parentInfo.cycleIndex, name]
    }

    /* ========================== 属性定义 ========================== */

    /* -------------------------- 元素数据引用 -------------------------- */

    /* ========================== 元素数据引用 ========================== */

    /* -------------------------- 页面数据 -------------------------- */

    /* ========================== 页面数据 ========================== */

    /* -------------------------- 响应 -------------------------- */

    /* ========================== 响应 ========================== */

    /* -------------------------- 函数 -------------------------- */

    /* ========================== 函数 ========================== */

    /* -------------------------- 页面参数 -------------------------- */

    const pageParameter_state = reactive({
        'processInstanceId': props.processInstanceId ?? route.query.processInstanceId
    })

    /* ========================== 页面参数 ========================== */

    /* -------------------------- 组件事件处理方法 -------------------------- */

    // ---------------------------- 组件数据同步 ----------------------------

    // ============================ 组件数据同步 ============================

    /* ========================== 组件事件处理方法 ========================== */

    /* -------------------------- 生命周期 -------------------------- */
    // 用于参数变更后重新执行自定义指令
    const queryUpdateFlag = ref(0)
    onMounted(() => {})

    onUnmounted(() => {
        // 销毁定时器
        setTimeOutList.forEach(({ repeat, timer }) => {
            repeat ? clearInterval(timer) : clearTimeout(timer)
        })
    })

    /* ========================== 生命周期 ========================== */

    /* -------------------------- 数据关联处理 -------------------------- */

    /* -------------------------- 表单数据同步 -------------------------- */
    /* ========================== 表单数据同步 ========================== */

    /* ========================== 数据关联处理 ========================== */

    /* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

    /* ========================== 不同组件自定义的处理逻辑 ========================== */

    // ================================定制化逻辑========================================
    const state = reactive({
        filter: {
            projectId: undefined,
            classify: undefined,
            submitter: undefined,
            submissionTimeList: []
        },
        tableLoading: false,
        activeKey: '外部需求变更记录',
        dataSource: [],
        dataSource1: [],
        fileList: [],
        showFileVisible: false,
        classifyList: [
            {
                'label': '状态变更',
                'value': '状态变更'
            },
            {
                'label': '创建项目',
                'value': '创建项目'
            },
            {
                'label': '删除项目',
                'value': '删除项目'
            },
            {
                'label': '编辑项目',
                'value': '编辑项目'
            },
            {
                'label': '项目信息变更',
                'value': '项目信息变更'
            },
            {
                'label': '项目阶段计划完成时间变更',
                'value': '项目阶段计划完成时间变更'
            },
            {
                'label': '项目阶段删除',
                'value': '项目阶段删除'
            },
            {
                'label': '任务删除',
                'value': '任务删除'
            },
            {
                'label': '任务完成',
                'value': '任务完成'
            }
        ],
        tableHeight: 400,
        modalForm: {
            'demandChangeDesc': undefined,
            'workHourEval': undefined,
            'attachmentList': [],
            'otherImpactDesc': undefined,
            'extInfluenceAssessment': undefined,
            'itemRelationDependency': undefined
        },
        modalVisible: false,
        modalTitle: '新建外部需求变更记录',
        modalLoading: false
    })
    const selectHolder = '请选择'
    const inputHolder = '请输入'
    const headerOffset = ref(150)
    const calcTableHeight = () => {
        state.tableHeight = window.innerHeight - 180 - headerOffset.value
    }
    onMounted(() => {
        calcTableHeight()
        window.addEventListener('resize', calcTableHeight)
    })
    onBeforeUnmount(() => {
        window.removeEventListener('resize', calcTableHeight)
    })
    watch(
        () => [props.useProjectId, props.activeKey, props.refreshCount],
        val => {
            tabChange()
        },
        { immediate: true }
    )
    function tabChange() {
        if (state.activeKey === '外部需求变更记录') {
            getData1()
        } else {
            getData()
        }
    }
    const peopleList = ref([])
    function getAllJfPeople() {
        get('/solution-ppm/api/v2/built-in-system-ppm/pmgf/get/allUser').then(({ data }) => {
            peopleList.value = data.userDtoList.map(item => {
                return {
                    label: item.name,
                    value: item.name
                }
            })
        })
    }
    function getData() {
        state.tableLoading = true
        post('/solution-ppm/api/v2/built-in-system-ppm/changeRecord/list', {
            ...state.filter,
            projectId: props.useProjectId
        })
            .then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    state.dataSource = []
                    return
                }
                state.dataSource = data.data.dataList
            })
            .finally(() => {
                state.tableLoading = false
            })
    }
    function getData1() {
        post('/solution-ppm/api/v2/built-in-system-ppm/v2/reqChange/list', {
            pageNo: 1,
            pageSize: 99999,
            projectId: props.useProjectId
        })
            .then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    state.dataSource1 = []
                    return
                }
                state.dataSource1 = data.data.dataList
            })
            .finally(() => {
                state.tableLoading = false
            })
    }
    function resetData() {
        state.filter = {
            projectId: undefined,
            classify: undefined,
            submitter: undefined,
            submissionTimeList: []
        }
        getData()
    }
    const columns = ref([
        {
            dataIndex: 'classify',
            title: '变更模块',
            ellipsis: true,
            align: 'center',
            width: 100,
            resizable: true,
            fixed: 'left'
        },

        {
            dataIndex: 'milepostName',
            title: '项目阶段',
            ellipsis: true,
            align: 'center',
            width: 120,
            resizable: true,
            fixed: 'left'
        },
        {
            dataIndex: 'taskName',
            title: '任务名称',
            ellipsis: true,
            align: 'center',
            width: 180,
            resizable: true,
            fixed: 'left'
        },
        {
            dataIndex: 'changeFieldName',
            title: '变更字段名',
            ellipsis: true,
            align: 'center',
            width: 180,
            resizable: true,
            fixed: 'left'
        },
        {
            dataIndex: 'beforeChange',
            title: '变更前（字段名称+数据）',
            ellipsis: true,
            align: 'center',
            width: 300,
            resizable: true
        },
        {
            dataIndex: 'afterChange',
            title: '变更后（字段名称+数据）',
            ellipsis: true,
            align: 'center',
            width: 300,
            resizable: true
        },
        {
            dataIndex: 'approvalStatus',
            title: '审批状态',
            ellipsis: true,
            align: 'center',
            width: 100,
            resizable: true
        },
        {
            dataIndex: 'currentApprover',
            title: '审批人',
            ellipsis: true,
            align: 'center',
            width: 100,
            resizable: true
        },

        {
            dataIndex: 'submitter',
            title: '提交人',
            align: 'center',
            ellipsis: true,
            width: 100
        },
        {
            dataIndex: 'submissionTime',
            title: '提交时间',
            align: 'center',
            ellipsis: true,
            width: 200
        }
    ])
    const columns1 = ref([
        {
            dataIndex: 'demandChangeDesc',
            title: '需求变更描述',
            ellipsis: true,
            align: 'center',
            width: 150,
            resizable: true,
            fixed: 'left'
        },

        {
            dataIndex: 'extInfluenceAssessment',
            title: '外部影响评估',
            ellipsis: true,
            align: 'center',
            width: 120,
            resizable: true,
            fixed: 'left'
        },
        {
            dataIndex: 'workHourEval',
            title: '内部工时评估',
            ellipsis: true,
            align: 'center',
            width: 180,
            resizable: true,
            fixed: 'left'
        },
        {
            dataIndex: 'itemRelationDependency',
            title: '事项关联依赖',
            ellipsis: true,
            align: 'center',
            width: 180,
            resizable: true,
            fixed: 'left'
        },
        {
            dataIndex: 'otherImpactDesc',
            title: '其他影响说明',
            ellipsis: true,
            align: 'center',
            width: 300,
            resizable: true
        },
        {
            dataIndex: 'approvalStatus',
            title: '审批状态',
            ellipsis: true,
            align: 'center',
            width: 100,
            resizable: true
        },
        {
            dataIndex: 'approver',
            title: '审批人',
            ellipsis: true,
            align: 'center',
            width: 100,
            resizable: true
        },

        {
            dataIndex: 'createdBy',
            title: '提交人',
            align: 'center',
            ellipsis: true,
            width: 100
        },
        {
            dataIndex: 'createdTime',
            title: '提交时间',
            align: 'center',
            ellipsis: true,
            width: 200
        },
        {
            dataIndex: 'operation',
            title: '操作',
            align: 'center',
            ellipsis: true,
            width: 220,
            fixed: 'right'
        }
    ])
    function handleResizeColumn(w, col) {
        col.width = w
    }
    function handlerUpload(file) {
        const data = new FormData()
        data.append('file', file)

        post('/file-storage/api/v1/file/upload', data).then(({ data: { fullUrl } }) => {
            if (data) {
                state.modalForm.attachmentList = [
                    ...state.modalForm.attachmentList,
                    {
                        uid: file.uid,
                        lastModified: file.lastModified,
                        name: file.name,
                        size: file.size,
                        type: file.type,
                        status: 'done',
                        url: fullUrl
                    }
                ]
            }
        })
        return false
    }

    function handleRemove(file) {
        state.modalForm.attachmentList = state.modalForm.attachmentList.filter(item => item.uid !== file.uid)
    }
    const recordRef = ref(null)
    const currentRecordData = ref({})
    function handleSubmitRecord() {
        recordRef.value.validate().then(() => {
            state.modalLoading = true
            if (currentRecordData.value.id) {
                put('/solution-ppm/api/v2/built-in-system-ppm/v2/reqChange/update', {
                    projectId: props.useProjectId,
                    ...state.modalForm
                })
                    .then(data => {
                        if (data.code !== 200) {
                            message.error(data.message)
                            return
                        }
                        message.success(data.message)
                        tabChange()
                        cancelRecord()
                    })
                    .finally(() => {
                        state.modalLoading = false
                    })
            } else {
                post('/solution-ppm/api/v2/built-in-system-ppm/v2/reqChange/save', {
                    projectId: props.useProjectId,
                    ...state.modalForm
                })
                    .then(data => {
                        if (data.code !== 200) {
                            message.error(data.message)
                            return
                        }
                        message.success(data.message)
                        tabChange()
                        cancelRecord()
                    })
                    .finally(() => {
                        state.modalLoading = false
                    })
            }
        })
    }
    function cancelRecord() {
        state.modalVisible = false
        currentRecordData.value = {}
        state.modalForm = {
            'demandChangeDesc': undefined,
            'workHourEval': undefined,
            'attachmentList': [],
            'otherImpactDesc': undefined,
            'extInfluenceAssessment': undefined,
            'itemRelationDependency': undefined
        }
    }
    function handleShowAdd() {
        state.modalVisible = true
        state.modalTitle = '新建外部需求变更记录'
    }
    function hanldeShowEdit(record) {
        post(`/solution-ppm/api/v2/built-in-system-ppm/v2/reqChange/judge-status/${record.id}/0`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            let orginData = cloneDeep(record)
            Object.assign(state.modalForm, orginData)
            currentRecordData.value = record
            state.modalVisible = true
            state.modalTitle = '编辑外部需求变更记录'
        })
    }
    function handleDeleteRecord(record) {
        post(`/solution-ppm/api/v2/built-in-system-ppm/v2/reqChange/judge-status/${record.id}/0`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            del(`/solution-ppm/api/v2/built-in-system-ppm/v2/reqChange/delete/${record.id}`).then(data => {
                if (data.code !== 200) {
                    message.error(data.message)
                    return
                }
                message.success(data.message)
                tabChange()
            })
        })
    }
    function handleShowFile(record) {
        post(`/solution-ppm/api/v2/built-in-system-ppm/v2/reqChange/judge-status/${record.id}/1`).then(data => {
            if (data.code !== 200) {
                message.error(data.message)
                return
            }
            state.fileList = record.attachmentList
            state.showFileVisible = true
        })
    }
    function cancelFile() {
        state.fileList = []
        state.showFileVisible = false
    }
</script>
<style lang="less" scoped>
    .page_root {
        width: 100%;
        height: 100%;
        overflow: auto;
    }
    .page_root :deep(.@{ant-prefix}-spin-nested-loading),
    .page_root :deep(.@{ant-prefix}-spin-container) {
        height: 100%;
    }
    .page_root :deep(.@{ant-prefix}-spin-container .@{ant-prefix}-table-wrapper) {
        display: flex;
        flex-flow: column nowrap;
        justify-content: flex-start;
    }
    .page_root :deep(.@{ant-prefix}-table) {
        flex: auto;
        overflow: auto;
    }
    .table-moreBtn_down {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100px;
    }

    .table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
        background: #ebf1ff;
    }

    /*  表格树结构样式处理，展开按钮层级增加*/
    :deep(.@{ant-prefix}-table-row-expand-icon) {
        z-index: 1;
    }
    /*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
    :deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 15px !important;
        width: calc(100% - 15px);
    }
    :deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 30px !important;
        width: calc(100% - 30px);
    }
    :deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 45px !important;
        width: calc(100% - 45px);
    }
    :deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
        left: 60px !important;
        width: calc(100% - 60px);
    }

    /* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
    :deep(.@{ant-prefix}-transfer-list) {
        height: 100%;
        width: 50%;
    }
    /*样式*/
    .top-search {
        background-color: #fff;
        margin-bottom: 16px;
        margin-top: 10px;
    }
    .top-search :deep(.ant3-row) {
        height: 40px;
    }
    .top-search :deep(.ant3-col) {
        height: 40px;
    }
    .table-top {
        display: flex;
        justify-content: space-between;
        margin-bottom: 16px;
        align-items: center;
    }
    .tip-msg {
        padding-left: 8px;
        border-left: 4px solid #3875ff;
        height: 16px;
        font-size: 16px;
        font-weight: 600;
        line-height: 16px;
    }
    .right-btn {
        display: flex;
        gap: 8px;
    }
    .table-box :deep(.@{ant-prefix}-table-tbody) tr > td {
        font-size: 14px;
        font-weight: 400;
        color: #262626;
        border-bottom: 1px solid #d9d9d9;
        padding: 8px 16px;
        word-break: break-all;
    }
    .title-top {
        font-size: 16px;
        height: 16px;
        color: #262626;
        line-height: 16px;
        font-weight: 600;
        padding-left: 8px;
        border-left: 4px solid #3875ff;
        margin-top: 10px;
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
</style>
